<template>
  <div class="es-goods">
    <!-- 左侧 -->
    <div class="left">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" :id="id" :checked="goodstatus" @change="clickGoods">
        <label class="form-check-label" :for="id">
          <img :src="imgsrc" alt="商品图片" class="thumb" />
        </label>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <div class="top">{{goodsname}}</div>
      <div class="bottom">
        <div class="price">￥{{price.toFixed(2)}}</div>
        <div class="count">
          <es-counter :number="count" :min="1" @numChange="getNum"></es-counter>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EsCounter from '../es-counter/EsCounter.vue';
export default {
  name: 'EsGoods',
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    goodsname: {
      type: String,
      default: 'xxx'
    },
    price: {
      type: [String, Number],
      required: true
    },
    count: {
      type: [String, Number],
      default: 1
    },
    imgsrc: {
      type: String,
      default: '#'
    },
    goodstatus: {
      type: Boolean,
      required: true
    }
  },
  emits: ['onCheckChange', 'numberChange'],
  methods: {
    clickGoods(e) {
      this.$emit('onCheckChange', { id: this.id, state: e.target.checked });
    },
    // 获取escounter 传递的num值
    getNum(num) {
      this.$emit('numberChange', {
        id: this.id,
        value: num
      });
    }
  },
  components: {
    EsCounter
  }
};
</script>

<style scoped>
.es-goods {
  display: flex;
  padding: 10px;
}
.es-goods + .es-goods {
  border-top: 1px solid #efefef;
}
.left {
  margin-right: 10px;
}
.thumb {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #efefef;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.right > .top {
  font-weight: 700;
}
.right > .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom > .price {
  color: red;
  font-weight: 700;
}
.form-check-input {
  margin-top: 3.3rem;
}
</style>